<template>
  <div class="codeContanier">
    <div v-code>
      <pre class="codepre"><code :class="codeClassName" class="codeBlock">{{ code }}</code></pre>
    </div>
  </div>
</template>

<script>
import hljs from "highlight.js";
import("highlight.js/styles/atom-one-dark.css");
import { computed, ref } from "vue";
export default {
  directives: {
    code: {
      inserted(el) {
        el.querySelectorAll("pre code").forEach((codeEl) => {
          hljs.highlightElement(codeEl);
        });
      },
    },
  },
  props: {
    code: {
      type: String,
      default: `<button>
                       <slot></slot>
</button>`,
    },
    lang: {
      type: String,
      default: "html",
    },
  },
  setup(props) {
    const codeClassName = computed(() => `language-${props.lang}`);
    return {
      codeClassName
    };
  },
};
</script>
<style scoped >
.codepre {
  margin: 0;
  padding: 0;
  font-size: 0.16rem;
  line-height: 1.5;
}
</style>
